//基础设施
var vm = new Vue({
	el: '#app',
	data: function() {
		return {}
	},
	mounted: function() {
		mui.init({});
		mui.ready(function() {
            $.ajax({
                url:"insertLog",
                data:{"type":"facilities"},
                type:"post",
                dataType:"json",
                success : function(){}
            });
			$("img.lazy").lazyload({
				effect: "fadeIn"
			});
			mui.previewImage();
			var chartItemStyle = {
				normal: {
					label: {
						show: true,
						formatter: '{c}'
					},
					labelLine: {
						show: true
					}
				},
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			};
			var commColor = ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#eb8146', '#626c91'];
			var myChart = echarts.init(document.getElementById('chart-base'));
			var myChart2 = echarts.init(document.getElementById('chart2'));
			var myChart3 = echarts.init(document.getElementById('chart3'));
			// 指定图表的配置项和数据
			var chart1_option = {
				color: commColor,
				legend: {
					orient: 'horizontal',
					left: 'center',
					top: 'top',
					data: ['城市快速路', '市政', '公路', '高速公路', '桥梁', '隧道']
				},
				series: [{
					name: '基础设施条目数',
					type: 'pie',
					radius: '50%',
					data: [{
							value: 15,
							name: '城市快速路'
						},
						{
							value: 2,
							name: '市政'
						},
						{
							value: 3,
							name: '公路'
						},
						{
							value: 19,
							name: '高速公路'
						},
						{
							value: 9,
							name: '桥梁'
						},
						{
							value: 19,
							name: '隧道'
						}
					],
					itemStyle: {
						normal: {
							label: {
								show: true,
								formatter:function(a){
                            if(a.name=='桥梁'){
                                return a.value+'座';
                            }else{
                                return a.value+'条';
                            }
                        } //'{c}条'
							},
							labelLine: {
								show: true
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			var chart2_option = {
				color: commColor,
				legend: {
					orient: 'horizontal',
					left: 'center',
					top: 'top',
					data: ['高速公路', '隧道', '城市快速路', '大桥', '市政', '公路']
				},
				series: [{
					name: '基础设施条目数',
					type: 'pie',
					radius: '50%',
					data: [{
							value: 663.31,
							name: '高速公路'
						},
						{
							value: 51.18,
							name: '隧道'
						},
						{
							value: 307.12,
							name: '城市快速路'
						},

						{
							value: 65.79,
							name: '大桥'
						},
						{
							value: 34.17,
							name: '市政'
						},
						{
							value: 45.99,
							name: '公路'
						}

					],
					itemStyle: {
						normal: {
							label: {
								show: true,
								formatter: '{c}Km'
							},
							labelLine: {
								show: true
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			var titleArr = ['申嘉湖高速', '嘉金高速', '莘奉金高速', '虹桥南段', '东南郊环', '花木四标', '沪渝高速', '同三高速', '沪芦高速', '中环浦西段', '外环1标', '北郊环', '虹桥北段', '杨高路', '崇启通道', '内环高架', '南郊环', '东海大桥', '长江隧桥', '东郊环', '京沪高速', '枫亭高速', '外环3标', '新卫高速', '曹安路', '沪常高速', '南北高架', '沪嘉高速', '外环2标', '嘉松路'];
			var valueArr = [83.51, 65, 60.2, 50.71, 50, 43.9, 43, 42.3, 41, 38, 37, 36, 33, 32, 30.74, 29, 28, 27, 25, 23, 22, 21, 20.33, 19, 18, 17, 16, 15.3, 14.6, 14.45];
			//TOP30
			var chart3_option = {
				title: {
					text: '养护设施里程（Km）TOP30',
					left: 'center'
				},
				color: ['#5cadff'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: titleArr.reverse()
				},
				series: [{
					type: 'bar',
					label: {
						normal: {
							show: true,
							position: 'inside'
						}
					},
					data: valueArr.reverse()
				}]
			};

			myChart.setOption(chart1_option);
			myChart2.setOption(chart2_option);
			myChart3.setOption(chart3_option);

			myChart.on('click', function(param) {
				console.log(param)
			});
		})
	}
})